<template>
	<view class="wrap" :style="{width: ratioSize + 'px', height: ratioSize + 'px', 'font-size': ratioSize + 'px'}">
		<view class="path1"></view>
		<view class="path2"></view>
		<view class="bar1" :style="{'transform': `rotate(${bar1Rotate}deg)`}"></view>
		<view class="bar2" :style="{'transform': `rotate(${bar2Rotate}deg)`}"></view>
		<view class="path3" v-if="value <= 50"></view>
		<view class="content">
			<slot></slot>
		</view>		
	</view>
</template>

<script>
	export default {
		props: {
			size: {// 高宽，逻辑像素
				type: Number,
				default: 60
			},
			value: {
				type: Number,
				default: 0
			}
		},
		computed: {
			ratioSize() {
				/**
				 * 原来用rpx时发现，如果页面渲染时得到的px值是偶数的话，
				 * 则两个进度条之间存在缝隙，所以这里自行计算，计算结果为偶数时强行加1，
				 * 强制所有情况的px值都是奇数
				 */ 
				let info = uni.getSystemInfoSync();
				let size = parseInt(this.size/info.pixelRatio);
				if(size % 2 == 0){
					size ++;
				}
				return size;
			},
			bar1Rotate() {
				return 360*this.value/100;
			},
			bar2Rotate() {
				if(this.value >= 50){
					return 180;
				}
				else{
					return 360*this.value/100;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	view{
		display: inline-block;
		box-sizing: border-box;
	}
	.wrap{
		border-radius: 50%;
		position: relative;	
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.bar1, .bar2{
		width: 0.48em;
		height: 0.96em;
		border-radius: 0.5em 0 0 0.5em;
		border-width: 0.08em 0 0.08em 0.08em;
		position: absolute;
		top: 0.02em;
		right: 50%;
		border-style: solid;
		border-color: $main-color;
		transform-origin: right center;
		transition: transform .3s;
	}
	.path1, .path2, .path3{
		background: #FFFFFF;
		width: 0.5em;
		height: 1em;
		position: absolute;
		top: 0;
		border-style: solid;
		border-color: #CCCCCC;
	}
	.path1, .path3{
		border-radius: 0.5em 0 0 0.5em;
		border-width: 0.12em 0 0.12em 0.12em;
		left: 0;
		transform-origin: right center;
	}
	.path2{
		border-radius: 0 0.5em 0.5em 0;
		border-width: 0.12em 0.12em 0.12em 0;
		right: 0;
		transform-origin: left center;
	}
	.path1{
		z-index: 1;
	}
	.path2{
		z-index: 2;
	}
	.bar1{
		z-index: 3;
	}
	.bar2{
		z-index: 4;
	}
	.path3{
		z-index: 5;		
	}
	.content{
		z-index: 10;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>